const ratio = 320 / 375 / 20; // 移动端320宽 / 后台375宽
import { utilJs } from "@/utils/common.js"
export const customStyle = {
  methods: {
    /**
     * 获取标题组件大标题的样式
     * @param {object} headLine 后台返回标题的样式设置对接
     * @returns String
     */
    getHeadLineTitle(headLine, isNeedHeight = 1) {
      let Style = '';
      if (!headLine || (headLine && headLine.custom == 1)) return Style
      Style = headLine && headLine.title && headLine.title.color ? `color: ${headLine.title.color};` : '';
      Style = headLine && headLine.title && headLine.title.weight ? Style + `font-weight: ${headLine.title.weight};` : Style;
      if (isNeedHeight) {
        Style = headLine && headLine.title && headLine.title.custom == 2 ? Style + `font-size: ${headLine.title.size * ratio}rem; line-height: ${(headLine.title.size + 4) * ratio}rem; height: ${(headLine.title.size + 4) * ratio}rem;` : Style;
      } else {
        Style = headLine && headLine.title && headLine.title.custom == 2 ? Style + `font-size: ${headLine.title.size * ratio}rem; line-height: ${(headLine.title.size + 4) * ratio}rem;` : Style;
      }
      return Style
    },

    /**
     * 获取标题组件副标题的样式
     * @param {object} headLine 后台返回标题的样式设置对接
     * @returns String
     */
    getHeadLineSmallTitle(headLine) {
      let Style = '';
      if (!headLine || (headLine && headLine.custom == 1)) return Style
      Style = headLine && headLine.title && headLine.title.color ? `color: ${headLine.title.color};` : '';
      Style = headLine && headLine.title && headLine.title.weight ? Style + `font-weight: ${headLine.title.weight};` : Style;
      Style = headLine && headLine.title && headLine.title.custom == 2 ? Style + `font-size: ${(headLine.title.size - 4) * ratio}rem;` : Style;
      return Style
    },

    /**
     * 获取标题组件查看更多的样式
     * @param {object} headLine 后台返回标题的样式设置对接
     * @returns String
     */
    getHeadLineMore(headLine) {
      let Style = '';
      if (!headLine || (headLine && headLine.custom == 1)) return Style
      Style = headLine && headLine.moreBtn && headLine.moreBtn.color ? `color: ${headLine.moreBtn.color};` : Style;
      Style = headLine && headLine.moreBtn && headLine.moreBtn.custom == 2 ? Style + `font-size: ${headLine.moreBtn.size * ratio}rem;` : Style;
      return Style
    },

    /**
     * 判断查看更多/分页加载的颜色设置
     * @param {*} headLine
     * @param {*} isBorder 边框主题色不是背景主题色
     * @returns
     */
    getMoreColor(headLine, isBorder) {
      if (headLine && headLine.custom == 2 && headLine.moreBtn && headLine.moreBtn.color) {
        if (isBorder) {
          return `color: ${headLine.moreBtn.color}; border: 1px solid ${headLine.moreBtn.color}; `
        }
        return `color: ${headLine.moreBtn.color}; background-color: rgba(${utilJs.hexToRgb(headLine.moreBtn.color)},0.1); `
      }
      if (sessionStorage.getItem("pageTextColor")) {
        let pageTextColor = sessionStorage.getItem("pageTextColor");
        if (isBorder) {
          return `color: ${pageTextColor}; border: 1px solid ${pageTextColor}; `
        }
        return `color: ${pageTextColor}; background-color: rgba(${utilJs.hexToRgb(pageTextColor)},0.1); `
      }
      return ''
    },

    /**
     * 获取标题上下间距 还有模块的底部间距样式
     * @param {*} marginSettings 后台返回模块间距样式设置对接
     * @param {*} type 区分是上下边距 还是下边距样式设置
     * @returns String
     */
    getVerticalSpacing(marginSettings, type = 1) {
      if (!marginSettings || (marginSettings && marginSettings.vertical && marginSettings.vertical.custom == 1)) return '';
      if (type == 1) {
        return `;padding-top: ${marginSettings.vertical.size * ratio}rem; padding-bottom: ${marginSettings.vertical.size * ratio}rem;`
      } else if (type == 2) {
        return `padding-bottom: ${marginSettings.vertical.size * ratio}rem; `
      } else if (type == 3) {
        return `padding-top: ${marginSettings.vertical.size * ratio}rem; `
      }
    },

    /**
     * 获取模块左右间距
     * @param {*} marginSettings 后台返回模块间距样式设置对接
     * @returns String
     */
    getHorizontalSpacing(marginSettings) {
      if (!marginSettings || (marginSettings && marginSettings.horizontal && marginSettings.horizontal.custom == 1)) return '';
      return `;padding-left: ${(marginSettings.horizontal.size * ratio).toFixed(2)}rem; padding-right: ${(marginSettings.horizontal.size * ratio).toFixed(2)}rem;`
    },

    /**
     * 获取模块去除内间距的宽度
     * @param {*} marginSettings 后台返回模块间距样式设置对接
     * @param {*} type 当前模块的排列方式 1一行两列/ 2瀑布流/ 3一行三列设置产品的宽度
     * @param {*} index 当前设置内容的排列索引
     * @returns String
     */
    getInnerSpacingWidth(marginSettings, type = 1, index) {
      if (!marginSettings || (marginSettings && marginSettings.inner && marginSettings.inner.custom == 1)) return '';
      let size = marginSettings.inner.size * ratio / 2;
      return type == 3 ? (`width: calc(33.33% - ${ marginSettings.inner.size * ratio * 2 / 3}rem; margin-right: ${(index + 1) % 3 == 0 ? 0 : marginSettings.inner.size * ratio}rem;`) : type == 2 ? `width: calc(100%  - ${size}rem;` : `width: calc(50%  - ${size}rem;`
    },

    /**
     * 获取模块内间距
     * @param {*} marginSettings 后台返回模块间距样式设置对接
     * @param {*} type 1底部间距  2一行多列设置产品的右间距
     * @param {*} showSpacing 根据行数索引逻辑是否展示底部间距
     * @returns String
     */
    //  type: 2 一行多列设置产品的间距 1 底部间距 showSpacing: 根据行数索引逻辑是否展示底部间距
    getInnerSpacing(marginSettings, type = 1, showSpacing = true) {
      if (!marginSettings || (marginSettings && marginSettings.inner && marginSettings.inner.custom == 1)) return '';
      return type == 2 ? `margin-right: ${marginSettings.inner.size * ratio}rem;` : `margin-bottom: ${showSpacing ? marginSettings.inner.size * ratio : 0}rem;`
    },

    /**
     * 设置图片容器大小
     * imageSetting = {
     *   ratio: 1, // 1- 3/2; 2- 4/3; 3- 16/9; 4- 1 / 1; 5- 2 / 3; 6- 9/16; 7-自定义
     * }
     * @param {*} imageSetting 后台返回图片样式设置对接
     * @param {*} oldRatio 默认比例值
     * @returns String
     */
    getImageRatio(imageSetting, oldRatio) {
      const ratio = {
        1: '3 / 2',
        2: '4 / 3',
        3: '16 / 9',
        4: '1 / 1',
        5: '2 / 3',
        6: '9 / 16',
      }
      if (!imageSetting && !oldRatio) return ''
      if (imageSetting) {
        return imageSetting && imageSetting.ratio == 7 && oldRatio ? `aspect-ratio: ${oldRatio};` : `aspect-ratio: ${ratio[imageSetting.ratio]};`
      } else if (!imageSetting && oldRatio) {
        return `aspect-ratio: ${oldRatio};`
      } else {
        return ''
      }
    },

    /**
     * 设置图片填充方式
     *   objectFit: 5, // 1- 填充cover; 2- 拉伸fill; 3- 周边留白contain; 4-周边虚化contain+底部磨玻璃+backdrop-filter: blur(4px);
     * @param {*} imageSetting  后台返回图片样式设置对接
     * @param {*} oldObjectFit 默认图片填充方式
     * @returns String
     */
    getImageObjectFit(imageSetting, oldObjectFit = 1) {
      const objectFit = {
        1: 'cover',
        2: 'fill',
        3: 'contain',
        4: 'contain'
      }
      if (!imageSetting && !oldObjectFit) return ''
      if (imageSetting) {
        return `object-fit: ${objectFit[imageSetting.objectFit]};`
      } else if (!imageSetting && oldObjectFit) {
        return `object-fit: ${objectFit[oldObjectFit]};`
      } else {
        return ''
      }
    },

    /**
     * 设置模块图片圆角
     * newRadius = {
     *   custom: 2, // 1-直角; 2-圆角
     *   size: 8
     * }
     * @param {*} newRadius 后台返回图片圆角设置对接
     * @param {*} oldRatio 默认设置图片圆角
     * @param {*} direction 默认设置图片圆角的方向 一个方向两个角
     * @returns String
     */
    getBorderRadius(newRadius, oldRadius, direction) {
      if ((!newRadius || (newRadius && newRadius.custom == 1)) && !oldRadius) return '';
      if (newRadius && newRadius.custom == 2) {
        if (direction == 'top') {
          return `border-top-left-radius: ${newRadius.size * ratio}rem; border-top-right-radius: ${newRadius.size * ratio}rem;`
        } else if (direction == 'left') {
          return `border-top-left-radius: ${newRadius.size * ratio}rem; border-bottom-left-radius: ${newRadius.size * ratio}rem;`
        } else if (direction == 'right') {
          return `border-top-right-radius: ${newRadius.size * ratio}rem; border-bottom-right-radius: ${newRadius.size * ratio}rem;`
        } else if (direction == 'bottom') {
          return `border-bottom-right-radius: ${newRadius.size * ratio}rem; border-bottom-left-radius: ${newRadius.size * ratio}rem;`
        } else if (direction == 'top-right') {
          return `border-top-right-radius: ${newRadius.size * ratio}rem;`
        }
        return `border-radius: ${newRadius.size * ratio}rem;`
      } else if (!newRadius && oldRadius) {
        return `border-radius: ${oldRadius};`
      } else {
        return ''
      }
    }
  }
}
